<!DOCTYPE html>
<!-- saved from url=(0053)https://race604.com/react-native-component-lifecycle/ -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="baidu-site-verification" content="CxeyRUkQ60">

    <title>React Native 中组件的生命周期</title>
    <meta name="description" content="">

    <meta name="HandheldFriendly" content="True">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="shortcut icon" href="https://race604.com/favicon.ico">

    <link rel="stylesheet" type="text/css" href="./React Native 中组件的生命周期_files/screen.css">
	<link rel="stylesheet" type="text/css" href="./React Native 中组件的生命周期_files/css"> 
	<link rel="stylesheet" type="text/css" href="./React Native 中组件的生命周期_files/prism.css">
	<link rel="stylesheet" type="text/css" href="./React Native 中组件的生命周期_files/custom.css">

    <link rel="canonical" href="https://www.race604.com/react-native-component-lifecycle/">
    <meta name="referrer" content="origin">
    
    <meta property="og:site_name" content="Jlog">
    <meta property="og:type" content="article">
    <meta property="og:title" content="React Native 中组件的生命周期">
    <meta property="og:description" content="概述 就像 Android 开发中的 View 一样，React Native（RN） 中的组件也有生命周期（Lifecycle）。所谓生命周期，就是一个对象从开始生成到最后消亡所经历的状态，理解生命周期，是合理开发的关键。RN 组件的生命周期整理如下图： 如图，可以把组件生命周期大致分为三个阶段： 第一阶段：是组件第一次绘制阶段，如图中的上面虚线框内，在这里完成了组件的加载和初始化； 第二阶段：是组件在运行和交互阶段，如图中左下角虚线框，这个阶段组件可以处理用户交互，或者接收事件更新界面； 第三阶段：是组件卸载消亡的阶段，如图中右下角的虚线框中，这里做一些组件的清理工作。 生命周期回调函数 下面来详细介绍生命周期中的各回调函数。 getDefaultProps 在组件创建之前，会先调用 getDefaultProps()，这是全局调用一次，严格地来说，...">
    <meta property="og:url" content="https://www.race604.com/react-native-component-lifecycle/">
    <meta property="og:image" content="http://7rf9ir.com1.z0.glb.clouddn.com/thumb_IMG_6671_1024.jpg">
    <meta property="article:published_time" content="2015-10-28T02:58:31.000Z">
    <meta property="article:modified_time" content="2015-10-28T05:10:47.000Z">
    <meta property="article:tag" content="React-Native">
    <meta property="article:tag" content="Android">
    
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="React Native 中组件的生命周期">
    <meta name="twitter:description" content="概述 就像 Android 开发中的 View 一样，React Native（RN） 中的组件也有生命周期（Lifecycle）。所谓生命周期，就是一个对象从开始生成到最后消亡所经历的状态，理解生命周期，是合理开发的关键。RN 组件的生命周期整理如下图： 如图，可以把组件生命周期大致分为三个阶段： 第一阶段：是组件第一次绘制阶段，如图中的上面虚线框内，在这里完成了组件的加载和初始化； 第二阶段：是组件在运行和交互阶段，如图中左下角虚线框，这个阶段组件可以处理用户交互，或者接收事件更新界面； 第三阶段：是组件卸载消亡的阶段，如图中右下角的虚线框中，这里做一些组件的清理工作。 生命周期回调函数 下面来详细介绍生命周期中的各回调函数。 getDefaultProps 在组件创建之前，会先调用 getDefaultProps()，这是全局调用一次，严格地来说，...">
    <meta name="twitter:url" content="https://www.race604.com/react-native-component-lifecycle/">
    <meta name="twitter:image:src" content="http://7rf9ir.com1.z0.glb.clouddn.com/thumb_IMG_6671_1024.jpg">
    
    <script src="./React Native 中组件的生命周期_files/ts.js.下载" async=""></script><script src="./React Native 中组件的生命周期_files/hm.js.下载"></script><script type="application/ld+json">
{
    "@context": "http://schema.org",
    "@type": "Article",
    "publisher": "Jlog",
    "author": {
        "@type": "Person",
        "name": "Race604",
        "url": "http://www.race604.com/author/race604",
        "sameAs": "http://www.weibo.com/devandroid",
        "description": "Android developer, Blogger. @Android笔记"
    },
    "headline": "React Native 中组件的生命周期",
    "url": "https://www.race604.com/react-native-component-lifecycle/",
    "datePublished": "2015-10-28T02:58:31.000Z",
    "dateModified": "2015-10-28T05:10:47.000Z",
    "image": "http://7rf9ir.com1.z0.glb.clouddn.com/thumb_IMG_6671_1024.jpg",
    "keywords": "React-Native, Android",
    "description": "概述 就像 Android 开发中的 View 一样，React Native（RN） 中的组件也有生命周期（Lifecycle）。所谓生命周期，就是一个对象从开始生成到最后消亡所经历的状态，理解生命周期，是合理开发的关键。RN 组件的生命周期整理如下图： 如图，可以把组件生命周期大致分为三个阶段： 第一阶段：是组件第一次绘制阶段，如图中的上面虚线框内，在这里完成了组件的加载和初始化； 第二阶段：是组件在运行和交互阶段，如图中左下角虚线框，这个阶段组件可以处理用户交互，或者接收事件更新界面； 第三阶段：是组件卸载消亡的阶段，如图中右下角的虚线框中，这里做一些组件的清理工作。 生命周期回调函数 下面来详细介绍生命周期中的各回调函数。 getDefaultProps 在组件创建之前，会先调用 getDefaultProps()，这是全局调用一次，严格地来说，..."
}
    </script>

    <meta name="generator" content="Ghost 0.7">
    <link rel="alternate" type="application/rss+xml" title="Jlog" href="http://www.race604.com/rss/">
	<script>
		var _hmt = _hmt || [];
		(function() {
			var hm = document.createElement("script");
			hm.src = "//hm.baidu.com/hm.js?c7d812723abc7b58e95eb253b72b13f7";
			var s = document.getElementsByTagName("script")[0]; 
			s.parentNode.insertBefore(hm, s);
		})();
	</script><style type="text/css" abt="234"></style>
<script type="text/javascript" async="" src="https://race604.disqus.com/embed.js"></script><script>//console.log('a')
</script><script>doAdblock();
function doAdblock(){
    (function() {
        function A() {}
        A.prototype = {
            rules: {
                'pps_pps': {
                    'find': /^http:\/\/www\.iqiyi\.com\/player\/cupid\/common\/pps_flvplay_s\.swf/,
                    'replace': 'http://swf.adtchrome.com/pps_20140420.swf'
                },
                '17173_in':{
                    'find':/http:\/\/f\.v\.17173cdn\.com\/(\d+\/)?flash\/PreloaderFile(Customer)?\.swf/,
                    'replace':"http://swf.adtchrome.com/17173_in_20150522.swf"
                },
                '17173_out':{
                    'find':/http:\/\/f\.v\.17173cdn\.com\/(\d+\/)?flash\/PreloaderFileFirstpage\.swf/,
                    'replace':"http://swf.adtchrome.com/17173_out_20150522.swf"
                },
                '17173_live':{
                    'find':/http:\/\/f\.v\.17173cdn\.com\/(\d+\/)?flash\/Player_stream(_firstpage)?\.swf/,
                    'replace':"http://swf.adtchrome.com/17173_stream_20150522.swf"
                },
                '17173_live_out':{
                    'find':/http:\/\/f\.v\.17173cdn\.com\/(\d+\/)?flash\/Player_stream_(custom)?Out\.swf/,
                    'replace':"http://swf.adtchrome.com/17173.out.Live.swf"
                }
            },
            _done: null,
            get done() {
                if(!this._done) {
                    this._done = new Array();
                }
                return this._done;
            },
            addAnimations: function() {
                var style = document.createElement('style');
                style.type = 'text/css';
                style.innerHTML = 'object,embed{\
                -webkit-animation-duration:.001s;-webkit-animation-name:playerInserted;\
                -ms-animation-duration:.001s;-ms-animation-name:playerInserted;\
                -o-animation-duration:.001s;-o-animation-name:playerInserted;\
                animation-duration:.001s;animation-name:playerInserted;}\
                @-webkit-keyframes playerInserted{from{opacity:0.99;}to{opacity:1;}}\
                @-ms-keyframes playerInserted{from{opacity:0.99;}to{opacity:1;}}\
                @-o-keyframes playerInserted{from{opacity:0.99;}to{opacity:1;}}\
                @keyframes playerInserted{from{opacity:0.99;}to{opacity:1;}}';
                document.getElementsByTagName('head')[0].appendChild(style);
            },
            animationsHandler: function(e) {
                if(e.animationName === 'playerInserted') {
                    this.replace(e.target);
                }
            },
            replace: function(elem) {
                if (/http:\/\/v.youku.com\/v_show\/.*/.test(window.location.href)){
                    var tag = document.getElementById("playerBox").getAttribute("player")
                    if (tag == "adt"){
                        console.log("adt adv")
                        return;
                    }
                }
                if(this.done.indexOf(elem) != -1) return;
                this.done.push(elem);
                var player = elem.data || elem.src;
                if(!player) return;
                var i, find, replace = false;
                for(i in this.rules) {
                    find = this.rules[i]['find'];
                    if(find.test(player)) {
                        replace = this.rules[i]['replace'];
                        if('function' === typeof this.rules[i]['preHandle']) {
                            this.rules[i]['preHandle'].bind(this, elem, find, replace, player)();
                        }else{
                            this.reallyReplace.bind(this, elem, find, replace)();
                        }
                        break;
                    }
                }
            },
            reallyReplace: function(elem, find, replace) {
                elem.data && (elem.data = elem.data.replace(find, replace)) || elem.src && ((elem.src = elem.src.replace(find, replace)) && (elem.style.display = 'block'));
                var b = elem.querySelector("param[name='movie']");
                this.reloadPlugin(elem);
            },
            reloadPlugin: function(elem) {
                var nextSibling = elem.nextSibling;
                var parentNode = elem.parentNode;
                parentNode.removeChild(elem);
                var newElem = elem.cloneNode(true);
                this.done.push(newElem);
                if(nextSibling) {
                    parentNode.insertBefore(newElem, nextSibling);
                } else {
                    parentNode.appendChild(newElem);
                }
            },
            init: function() {
                var handler = this.animationsHandler.bind(this);
                document.body.addEventListener('webkitAnimationStart', handler, false);
                document.body.addEventListener('msAnimationStart', handler, false);
                document.body.addEventListener('oAnimationStart', handler, false);
                document.body.addEventListener('animationstart', handler, false);
                this.addAnimations();
            }
        };
        new A().init();
    })();
}
// 20140730
(function cnbeta() {
    if (document.URL.indexOf('cnbeta.com') >= 0) {
        var elms = document.body.querySelectorAll("p>embed");
        Array.prototype.forEach.call(elms, function(elm) {
            elm.style.marginLeft = "0px";
        });
    }
})();
//baidu
if(document.URL.indexOf('www.baidu.com') >= 0){
    if(document && document.getElementsByTagName && document.getElementById && document.body){
        var aa = function(){
            var all = document.body.querySelectorAll("#content_left div,#content_left table");
            for(var i = 0; i < all.length; i++){
                if(/display:\s?(table|block)\s!important/.test(all[i].getAttribute("style"))){all[i].style.display= "none";all[i].style.visibility='hidden';}
            }
            all = document.body.querySelectorAll('.result.c-container[id="1"]');
            //if(all.length == 1) return;
            for(var i = 0; i < all.length; i++){
                if(all[i].innerHTML && all[i].innerHTML.indexOf('广告')>-1){
                    all[i].style.display= "none";all[i].style.visibility='hidden';
                }
            }
        }
        aa();
        document.getElementById('wrapper_wrapper').addEventListener('DOMSubtreeModified',aa)
    };
}
// 20140922
(function kill_360() {
    if (document.URL.indexOf('so.com') >= 0) {
        document.getElementById("e_idea_pp").style.display = none;
    }
})();
if (document.URL.indexOf("tv.sohu.com") >= 0){
    if (document.cookie.indexOf("fee_status=true")==-1){document.cookie='fee_status=true'};
}
if (document.URL.indexOf("56.com") >= 0){
    if (document.cookie.indexOf("fee_status=true")==-1){document.cookie='fee_status=true'};
}
if (document.URL.indexOf("iqiyi.com") >= 0){
    if (document.cookie.indexOf("player_forcedType=h5_VOD")==-1){
        document.cookie='player_forcedType=h5_VOD'
        if(localStorage.reloadTime && Date.now() - parseInt(localStorage.reloadTime)<60000){
            console.log('no reload')
        }else{
            location.reload()
            localStorage.reloadTime = Date.now();
        }
    }
}
</script><style type="text/css">object,embed{                -webkit-animation-duration:.001s;-webkit-animation-name:playerInserted;                -ms-animation-duration:.001s;-ms-animation-name:playerInserted;                -o-animation-duration:.001s;-o-animation-name:playerInserted;                animation-duration:.001s;animation-name:playerInserted;}                @-webkit-keyframes playerInserted{from{opacity:0.99;}to{opacity:1;}}                @-ms-keyframes playerInserted{from{opacity:0.99;}to{opacity:1;}}                @-o-keyframes playerInserted{from{opacity:0.99;}to{opacity:1;}}                @keyframes playerInserted{from{opacity:0.99;}to{opacity:1;}}</style></head>
<body class="post-template tag-react-native tag-android nav-closed">

    <script>
var option = {
  engineKey: 'c29c7fadac38df734154'
};
(function(w,d,t,u,n,s,e){
  s = d.createElement(t);
  s.src = u;
  s.async = 1;
  w[n] = function(r){
    w[n].opts = r;
  };
  e = d.getElementsByTagName(t)[0];
  e.parentNode.insertBefore(s, e);
})(window,document,'script','//tinysou-cdn.b0.upaiyun.com/ts.js','_ts');
_ts(option);
</script>
<div class="nav">
    <h3 class="nav-title">Menu</h3>
    <a href="https://race604.com/react-native-component-lifecycle/#" class="nav-close">
        <span class="hidden">Close</span>
    </a>
    <ul>
            <li class="nav-home" role="presentation"><a href="http://www.race604.com/">Home</a></li>
            <li class="nav-weekly" role="presentation"><a href="http://www.race604.com/tag/android-weekly/">Weekly</a></li>
            <li class="nav-about" role="presentation"><a href="http://www.race604.com/about/">About</a></li>
    </ul>
<form><input type="text" id="ts-search-input" class="ts-search-input" style="padding: 0px 0px 0px 27px; margin-left:4px"></form>
    <a class="subscribe-button icon-feed" href="https://www.race604.com/rss/">Subscribe</a>
</div>
<span class="nav-cover"></span>


    <div class="site-wrapper">

        


<header class="main-header post-head " style="background-image: url(http://7rf9ir.com1.z0.glb.clouddn.com/thumb_IMG_6671_1024.jpg)">
    <nav class="main-nav overlay clearfix">
        <a class="blog-logo" href="https://www.race604.com/"><img src="./React Native 中组件的生命周期_files/ic_home_grey600_48dp.png" alt="Jlog"></a>
            <a class="menu-button icon-menu" href="https://race604.com/react-native-component-lifecycle/#"><span class="word">Menu</span></a>
    </nav>
</header>

<main class="content" role="main">
    <article class="post tag-react-native tag-android">

        <header class="post-header">
            <h1 class="post-title">React Native 中组件的生命周期</h1>
            <section class="post-meta">
                <time class="post-date" datetime="2015-10-28">28 October 2015</time>  on <a href="https://race604.com/tag/react-native/">React-Native</a>, <a href="https://race604.com/tag/android/">Android</a>
            </section>
        </header>

        <section class="post-content">
            <h2 id="">概述</h2>

<p>就像 Android 开发中的 View 一样，React Native（RN） 中的组件也有生命周期（Lifecycle）。所谓生命周期，就是一个对象从开始生成到最后消亡所经历的状态，理解生命周期，是合理开发的关键。RN 组件的生命周期整理如下图：</p>

<p><img src="./React Native 中组件的生命周期_files/3-3-component-lifecycle.jpg" alt="3-3-component-lifecycle"></p>

<p>如图，可以把组件生命周期大致分为三个阶段：</p>

<ul>
<li>第一阶段：是组件第一次绘制阶段，如图中的上面虚线框内，在这里完成了组件的加载和初始化；</li>
<li>第二阶段：是组件在运行和交互阶段，如图中左下角虚线框，这个阶段组件可以处理用户交互，或者接收事件更新界面；</li>
<li>第三阶段：是组件卸载消亡的阶段，如图中右下角的虚线框中，这里做一些组件的清理工作。</li>
</ul>

<h2 id="">生命周期回调函数</h2>

<p>下面来详细介绍生命周期中的各回调函数。</p>

<h4 id="getdefaultprops">getDefaultProps</h4>

<p>在组件创建之前，会先调用 <code>getDefaultProps()</code>，这是全局调用一次，严格地来说，这不是组件的生命周期的一部分。在组件被创建并加载候，首先调用 <code>getInitialState()</code>，来初始化组件的状态。</p>

<h4 id="componentwillmount">componentWillMount</h4>

<p>然后，准备加载组件，会调用 <code>componentWillMount()</code>，其原型如下：</p>

<pre><code>void componentWillMount()  
</code></pre>

<p>这个函数调用时机是在组件创建，并初始化了状态之后，在第一次绘制 <code>render()</code> 之前。可以在这里做一些业务初始化操作，也可以设置组件状态。这个函数在整个生命周期中只被调用一次。</p>

<h4 id="componentdidmount">componentDidMount</h4>

<p>在组件第一次绘制之后，会调用 <code>componentDidMount()</code>，通知组件已经加载完成。函数原型如下：</p>

<pre><code>void componentDidMount()  
</code></pre>

<p>这个函数调用的时候，其虚拟 DOM 已经构建完成，你可以在这个函数开始获取其中的元素或者子组件了。需要注意的是，RN 框架是先调用子组件的 <code>componentDidMount()</code>，然后调用父组件的函数。从这个函数开始，就可以和 JS 其他框架交互了，例如设置计时 <code>setTimeout</code> 或者 <code>setInterval</code>，或者发起网络请求。这个函数也是只被调用一次。这个函数之后，就进入了稳定运行状态，等待事件触发。</p>

<h4 id="componentwillreceiveprops">componentWillReceiveProps</h4>

<p>如果组件收到新的属性（props），就会调用 <code>componentWillReceiveProps()</code>，其原型如下：</p>

<pre><code>void componentWillReceiveProps(  
  object nextProps
)
</code></pre>

<p>输入参数 <code>nextProps</code> 是即将被设置的属性，旧的属性还是可以通过 <code>this.props</code> 来获取。在这个回调函数里面，你可以根据属性的变化，通过调用 <code>this.setState()</code> 来更新你的组件状态，这里调用更新状态是安全的，并不会触发额外的 <code>render()</code> 调用。如下：</p>

<pre><code>componentWillReceiveProps: function(nextProps) {  
  this.setState({
    likesIncreasing: nextProps.likeCount &gt; this.props.likeCount
  });
}
</code></pre>

<h4 id="shouldcomponentupdate">shouldComponentUpdate</h4>

<p>当组件接收到新的属性和状态改变的话，都会触发调用 <code>shouldComponentUpdate(...)</code>，函数原型如下：</p>

<pre><code>boolean shouldComponentUpdate(  
  object nextProps, object nextState
)
</code></pre>

<p>输入参数 <code>nextProps</code> 和上面的 <code>componentWillReceiveProps</code> 函数一样，<code>nextState</code> 表示组件即将更新的状态值。这个函数的返回值决定是否需要更新组件，如果 <code>true</code> 表示需要更新，继续走后面的更新流程。否者，则不更新，直接进入等待状态。</p>

<p>默认情况下，这个函数永远返回 <code>true</code> 用来保证数据变化的时候 UI 能够同步更新。在大型项目中，你可以自己重载这个函数，通过检查变化前后属性和状态，来决定 UI 是否需要更新，能有效提高应用性能。</p>

<h4 id="componentwillupdate">componentWillUpdate</h4>

<p>如果组件状态或者属性改变，并且上面的 <code>shouldComponentUpdate(...)</code> 返回为 <code>true</code>，就会开始准更新组件，并调用 <code>componentWillUpdate()</code>，其函数原型如下：</p>

<pre><code>void componentWillUpdate(  
  object nextProps, object nextState
)
</code></pre>

<p>输入参数与 <code>shouldComponentUpdate</code> 一样，在这个回调中，可以做一些在更新界面之前要做的事情。需要特别注意的是，在这个函数里面，你就不能使用 <code>this.setState</code> 来修改状态。这个函数调用之后，就会把 <code>nextProps</code> 和 <code>nextState</code> 分别设置到 <code>this.props</code> 和 <code>this.state</code> 中。紧接着这个函数，就会调用 <code>render()</code> 来更新界面了。</p>

<h4 id="componentdidupdate">componentDidUpdate</h4>

<p>调用了 <code>render()</code> 更新完成界面之后，会调用 <code>componentDidUpdate()</code> 来得到通知，其函数原型如下：</p>

<pre><code>void componentDidUpdate(  
  object prevProps, object prevState
)
</code></pre>

<p>因为到这里已经完成了属性和状态的更新了，此函数的输入参数变成了 <code>prevProps</code> 和 <code>prevState</code>。</p>

<h4 id="componentwillunmount">componentWillUnmount</h4>

<p>当组件要被从界面上移除的时候，就会调用 <code>componentWillUnmount()</code>，其函数原型如下：</p>

<pre><code>void componentWillUnmount()  
</code></pre>

<p>在这个函数中，可以做一些组件相关的清理工作，例如取消计时器、网络请求等。</p>

<h2 id="">总结</h2>

<p>到这里，RN 的组件的完整的生命都介绍完了，在回头来看一下前面的图，就比较清晰了，把生命周期的回调函数总结成如下表格：</p>

<table>  
<thead>  
<tr>  
<th>生命周期</th>  
<th>调用次数</th>  
<th>能否使用 setSate()</th>  
</tr>  
</thead>  
<tbody>  
<tr>  
<td>getDefaultProps</td>  
<td>1(全局调用一次)</td>  
<td>否</td>  
</tr>  
<tr>  
<td>getInitialState</td>  
<td>1</td>  
<td>否</td>  
</tr>  
<tr>  
<td>componentWillMount</td>  
<td>1</td>  
<td>是</td>  
</tr>  
<tr>  
<td>render</td>  
<td>&gt;=1</td>  
<td>否</td>  
</tr>  
<tr>  
<td>componentDidMount</td>  
<td>1</td>  
<td>是</td>  
</tr>  
<tr>  
<td>componentWillReceiveProps</td>  
<td>&gt;=0</td>  
<td>是</td>  
</tr>  
<tr>  
<td>shouldComponentUpdate</td>  
<td>&gt;=0</td>  
<td>否</td>  
</tr>  
<tr>  
<td>componentWillUpdate</td>  
<td>&gt;=0</td>  
<td>否</td>  
</tr>  
<tr>  
<td>componentDidUpdate</td>  
<td>&gt;=0</td>  
<td>否</td>  
</tr>  
<tr>  
<td>componentWillUnmount</td>  
<td>1</td>  
<td>否</td>  
</tr>  
</tbody>  
</table>
<div id="disqus_thread"></div>
<script type="text/javascript">
    /* * * CONFIGURATION VARIABLES * * */
    var disqus_shortname = 'race604';
    /* * * DON'T EDIT BELOW THIS LINE * * */
    (function() {
        var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
        dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
        (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
    })();
</script>
<noscript>Please enable JavaScript to view the &lt;a href="https://disqus.com/?ref_noscript" rel="nofollow"&gt;comments powered by Disqus.&lt;/a&gt;</noscript>
        </section>

        <footer class="post-footer">



            <section class="author">
                <h4><a href="https://race604.com/author/race604/">Race604</a></h4>

                    <p>Android developer, Blogger. @Android笔记</p>
                <div class="author-meta">
                    
                    <span class="author-link icon-link"><a href="http://www.weibo.com/devandroid">http://www.weibo.com/devandroid</a></span>
                </div>
            </section>


            <section class="share">
                <h4>Share this post</h4>
		<a class="icon-twitter" href="https://twitter.com/intent/tweet?text=React%20Native%20%E4%B8%AD%E7%BB%84%E4%BB%B6%E7%9A%84%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F&amp;url=http://www.race604.com/react-native-component-lifecycle/" onclick="window.open(this.href, &#39;twitter-share&#39;, &#39;width=550,height=235&#39;);return false;">
                    <span class="hidden">Twitter</span>
                </a>
                <a class="icon-facebook" href="https://www.facebook.com/sharer/sharer.php?u=http://www.race604.com/react-native-component-lifecycle/" onclick="window.open(this.href, &#39;facebook-share&#39;,&#39;width=580,height=296&#39;);return false;">
                    <span class="hidden">Facebook</span>
                </a>
                <a class="icon-google-plus" href="https://plus.google.com/share?url=http://www.race604.com/react-native-component-lifecycle/" onclick="window.open(this.href, &#39;google-plus-share&#39;, &#39;width=490,height=530&#39;);return false;">
                    <span class="hidden">Google+</span>
                </a>
            </section>

        </footer>

    </article>
</main>

<aside class="read-next">
    <a class="read-next-story no-cover" href="https://race604.com/android-weekly-29/">
        <section class="post">
            <h2>[第29期]Android周报</h2>
            <p>文章/教程 Android 打包的那些事  我们都知道 Gradle 的功能很强大，但是具体能干啥呢？本文主要写了 Gradle 中非常实用的小技巧，也是一个实际使用 Gradle 的启发。 让App像Web一样发布新版本  这是一个 Android 应用的热修复的解决方案，利用的…</p>
        </section>
    </a>
    <a class="read-next-story prev no-cover" href="https://race604.com/back-to-ghost/">
        <section class="post">
            <h2>独立博客终于回来了</h2>
            <p>网站风格又大变了，不要惊讶，这才是它本来应该的样子。 因为网站备案的原因，经历了博客从 Ghost 迁移到 Hexo，博客托管在 GitCafe 的 Pages 服务上面，到现在已经快两个月了。 今天终于收到消息通知网站备案通过了，终于又可以假设这个独立博客了。不是因为 Hexo + GitHub/…</p>
        </section>
    </a>
</aside>



        <footer class="site-footer clearfix">
            <section class="copyright"><a href="https://www.race604.com/">Jlog</a> © 2017</section>
            <section class="poweredby">Proudly published with <a href="https://ghost.org/">Ghost</a></section>
        </footer>

    </div>

    <!-- You can safely delete this line if your theme does not require jQuery -->
<script type="text/javascript" src="./React Native 中组件的生命周期_files/jquery-1.11.3.min.js.下载"></script>

    <script type="text/javascript" src="./React Native 中组件的生命周期_files/jquery-1.11.3.min.js.下载"></script> 
    <script type="text/javascript" src="./React Native 中组件的生命周期_files/jquery.fitvids.js.下载"></script>
    <script type="text/javascript" src="./React Native 中组件的生命周期_files/prism.js.下载"></script>
    <script type="text/javascript" src="./React Native 中组件的生命周期_files/index.js.下载"></script>



</body></html>